<div class="sidebar" @slideRight *ngIf="modal.visible">

	<app-header [sticky]="true" [back]="true" [transparent]="true">
		<div header-back (click)="modal.onClose()">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				class="ai ai-ArrowLeft">
				<path d="M11 5l-7 7 7 7" />
				<path d="M4 12h16" />
			</svg>
		</div>
		<div header-title>

		</div>
		<div header-actions class="actions">
			<div appRipple (click)="onCreate()" class="action">
				<i class="ph-user-plus"></i>
			</div>
		</div>
	</app-header>



	<div appLoader [loading]="loading" class="sidebar-content">





		<div class="users">
			<div (click)="onEditUser(user._id)" class="user" *ngFor="let user of users.data">
				<div class="avatar">

					<app-avatar [picture]="user.picture" [name]="user.first_name" [width]="50" [height]="50">
					</app-avatar>

				</div>
				<div class="text">{{ user.first_name }} {{ user.last_name }}

				</div>
				<div><small>{{ user?.role?.name }}</small></div>
			</div>
		</div>
	</div>
</div>